<template>
 <div class="footer">
    <div class="comment-box">
          <img class="pen-icon" src="/static/images/icon/pen.png" alt="">
          <input confirm-type="send" :value="inputValue" @confirm="writeSubmit" :focus="focus" type="text" placeholder="写评论">
        </div>
        <div hover-class="hoverc" class="fitem">
          <button open-type="contact" class="zbtn">
            <img src="/static/images/icon/ping.png" alt="">
            
             </button>
             <p>咨询</p>
            </div>
        <div v-if="shoucangStatus" hover-class="hoverc" @tap="delcollection" class="fitem">
          <img src="/static/images/icon/cangs.png" alt="">
          <p>已收藏</p>
        </div>
        <div v-else hover-class="hoverc" @tap="collection" class="fitem">
          <img src="/static/images/icon/cang.png" alt="">
          <p>收藏</p>
        </div>
        <div hover-class="hoverc" class="fitem">
           <button class="zbtn" open-type="share">
          <img src="/static/images/icon/share.png" alt="">
           </button>
        <p>分享</p>
        
        </div>
        <div hover-class="hoverc" @tap.stop="shareToMoments" class="fitem"><img src="/static/images/icon/quan.png" alt="">
        <p>朋友圈</p>
         
        </div>
</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { showSuccess, showError } from "@/utils/index";
import config from "@/utils/config";
export default {
  computed: {
    ...mapState(["comment"]),
    shoucangStatus() {
      return this.$store.state.shoucangStatus;
    }
  },
  //页面初始化必须加上，否则第一次加载时无法检验收藏状态
  mounted() {
    this.showCollectionStatus();
  },

  onShow() {
    this.showCollectionStatus();
  },

  methods: {
    ...mapActions(["postComment"]),
    //收藏功能遇到的坑
    showCollectionStatus() {
      let collections = wx.getStorageSync("collections");
      let id = parseInt(this.$root.$mp.query.id);
      let arr = [];
      if (collections.length > 0) {
        for (let i = 0; i < collections.length; i++) {
          if (collections[i].products_id == id) {
            arr.push(collections[i]);
          }
        }
      } else {
        this.$store.state.shoucangStatus = false;
      }
      if (arr.length >= 1) {
        this.$store.state.shoucangStatus = true;
      } else {
        this.$store.state.shoucangStatus = false;
      }
    },
    //删除收藏
    delcollection() {
      let collections = wx.getStorageSync("collections");
      let key = collections.indexOf({
        products_id: this.$store.state.pdetail.id
      });
      collections.splice(key, 1);
      wx.setStorageSync("collections", collections);
      this.$store.state.shoucangStatus = false;
    },
    //收藏
    collection() {
      var collections = wx.getStorageSync("collections");
      if (!collections) {
        collections = new Array();
      }
      collections.push({
        products_id: this.$store.state.pdetail.id,
        productsDetail: this.$store.state.pdetail
      });
      wx.setStorageSync("collections", collections);
      this.$store.state.shoucangStatus = true;
    },
    //写评论
    async writeSubmit(e) {
      let value = e.mp.detail.value;
      if (!value) {
        return;
      }
      const result = await this.postComment({
        products_id: this.$store.state.pdetail.id,
        content: value
      });
      if (result.status === 1) {
        this.$store.state.commentsList.unshift(result.data);
        wx.showToast({
          title: "评论成功!",
          icon: "success"
        });
      } else {
        showError("您还没有登陆!");
        this.$store.state.actionSheetShow = true;
      }
    },
    shareToMoments() {
      //传递shareToMoments方法给父组件
      this.$emit(
        "shareToMoments",
        this.$store.state.pdetail.title,
        config.imageUrl + this.$store.state.pdetail.image
      );
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/varibles.scss";
.zbtn {
  line-height: 1;
  background: #fff;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 4rpx;
}
.zbtn:hover {
  background: $hoverBg2;
}
.zbtn::after {
  border: none;
}
.footer {
  z-index: 99;
  position: fixed;
  display: flex;
  bottom: 0;
  height: 100rpx;
  border-top: 1rpx solid $borderColor;
  background: #fff;
  left: 0;
  right: 0;
  .comment-box {
    position: relative;
    flex: 1;
    input {
      margin-left: 10rpx;
      padding-left: 60rpx;
      display: inline-block;
      background: #eee;
      margin-top: 15rpx;
      height: 70rpx;
      line-height: 70rpx;
      font-size: $fontSize3;
      border-radius: 10rpx;
    }
    .pen-icon {
      z-index: 9;
      position: absolute;
      left: 20rpx;
      top: 30rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }
  .hoverc {
    background: $hoverBg2;
  }
  .fitem {
    width: 15%;
    font-size: $fontSize0;
    padding-top: 15rpx;
    text-align: center;
    img {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
</style>

